<template>
	<view class="side-nav" v-if="modelValue">
		<view class="triangle" />
		<view class="menu-list">
			<view class="menu-item" v-for="(item,i) in list" :key="item.texts">
				<view class="line" v-if="i!=0"></view>
				<view class="menu-item-content" @tap="action(i,item)">
					<view class="menu-item-icon">
						<uni-icons :type="item.icon" v-if="item.iconType && item.iconType == 'uni-icons'"
							:size="item.iconSize || 22" color="#FFFFFF"></uni-icons>
						<svg-icon :icon="item.icon" v-else></svg-icon>
					</view>
					<view class="menu-item-text">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			modelValue: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			action(i, item) {
				this.$emit("action", i, item)
			},
			close() {
				this.$emit("update:modelValue", false)
			}
		},
	}
</script>

<style lang="scss">
	//从这里开始是弹出框的样式  不需要搜索框的 前面样式都不用加

	.side-nav {
		z-index: 999;
		position: absolute;
		right: 10rpx;
		width: max-content;
		background-color: $gray-700;
		box-shadow: 0 0 12px 2px rgba(0, 0, 0, .1);
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.menu-list {
			display: flex;
			flex-direction: column;

			.menu-item {

				.line {
					width: 100%;
					height: 1rpx;
					background-color: $gray-600;
					margin: 10rpx;
				}

				.menu-item-content {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					color: $white;
					gap: 12px;
					padding: 8rpx 0;
				}
			}
		}

		.triangle {
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 10px solid $gray-700;
			position: absolute;
			top: -7px;
			right: 16rpx;
		}
	}
</style>